<template>
  <div class="add-subjects">
    <el-form
      :model="addForm"
      size="small"
      label-width="100px"
      :rules="addFormRules"
      ref="addFormRef"
    >
      <el-form-item label="学科名称" prop="subjectName">
        <el-input v-model="addForm.subjectName" autocomplete="off" placeholder="请输入学科名称"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="delivery">
        <el-switch v-model="addForm.isFrontDisplay" inactive-color="#ff4949"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeVisible">取 消</el-button>
      <el-button type="primary" @click="addSubjectName">确 定</el-button>
    </div>
  </div>
</template>

<script>
// 导入添加学科的请求  修改学科的请求组件
import { addSubjects, editSubjects } from "@/api/hmmm/subjects.js";

export default {
  name: "SubjectsAdd",
  data() {
    return {
      // addForm: {
      //   isFrontDisplay: false,
      // },
      addFormRules: {
        // 表单校验
        subjectName: [
          { required: true, message: "请输入学科名称", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    addForm: {
      type: Object,
      required: true,
    },
    userID: {
      type: Number,
      required: true,
    },
  },
  methods: {
    // 点击确定添加学科
    addSubjectName() {
      const requestData = {
        subjectName: this.addForm.subjectName,
        id: this.userID,
        isFrontDisplay: this.addForm.isFrontDisplay,
      };
      // const id = this.addForm.id;

      if (this.isEdit) {
        this.$refs.addFormRef.validate(async (valid) => {
          if (!valid) {
            return;
          }
          // 修改学科名称
          try {
            const { data: res } = await editSubjects(this.userID, requestData);

            // 关闭弹出框
            this.$emit("close");
            this.$emit("loadSubjectList");
            this.$message.success("修改学科成功");
          } catch (error) {
            console.log(error);
            this.$message.error("修改失败");
          }
        });
      } else {
        // 表单的预校验
        this.$refs.addFormRef.validate(async (valid) => {
          if (!valid) {
            return;
          }
          // 调用接口添加学科
          try {
            const { data: res } = await addSubjects(this.addForm);
            // 关闭弹出框
            this.$emit("close");
            this.$emit("loadSubjectList");
            this.$message.success("添加学科成功");
          } catch (error) {
            this.$message.error("添加学科名称失败");
          }
        });
      }
    },
    // 关闭对话框
    closeVisible() {
      this.$refs.addFormRef.resetFields();
      this.$emit("close");
    },
    // 修改学科回显数据方法
    // editShowData(row) {
    //   console.log(row);
    //   this.addForm.subjectName = row.subjectName;
    // },
  },
  mounted() {
    this.addForm.isFrontDisplay = false;
  },
  // mounted() {
  //   this.addForm.isFrontDisplay = true;
  // },
};
</script>

<style scoped lang='less'>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
/deep/.el-form-item__label {
  text-align: right;
  // padding-left: 10px;
}
</style>
